<template>
  <PageWrapper>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="高级表单">
        当一次性提交大量数据时，可使用高级表单，根据自身情况选择是否使用 BasicForm
        组件，以下布局支持自适应
      </a-card>
    </div>
    <a-form
      ref="formRef"
      :label-col-props="{ span: 6 }"
      :wrapper-col-props="{ span: 18 }"
      :model="formValue"
      label-placement="left"
      @submit="handleSubmit"
    >
      <a-card :bordered="false" class="mt-3 proCard" title="预约信息">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="预约姓名" field="name" :rules="rules.name">
              <a-input v-model="formValue.name" placeholder="输入姓名" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="预约号码" field="mobile" :rules="rules.mobile">
              <a-input v-model="formValue.mobile" placeholder="电话号码" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="预约时间" field="datetime" :rules="rules.datetime">
              <a-date-picker class="w-full" v-model="formValue.datetime" type="datetime" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="预约医生" field="doctor" :rules="rules.doctor">
              <a-select
                v-model="formValue.doctor"
                :options="doctorList"
                placeholder="请选择预约医生"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="预约事项" field="matter">
              <a-select
                v-model="formValue.matter"
                :options="matterList"
                multiple
                placeholder="请选择预约事项"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="预约备注" field="remark">
              <a-input v-model="formValue.remark" placeholder="请输入预约备注" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="预约备注" field="remark">
              <a-input v-model="formValue.remark" placeholder="请输入预约备注" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="出生日期" field="dateBirth">
              <a-date-picker class="w-full" v-model="formValue.dateBirth" type="datetime" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="性别" field="sex">
              <a-radio-group v-model="formValue.sex" field="sex">
                <a-space>
                  <a-radio :value="1">男</a-radio>
                  <a-radio :value="2">女</a-radio>
                </a-space>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card :bordered="false" class="mt-3 proCard" title="就诊信息">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="过敏史" field="allergiChistory">
              <a-input v-model="formValue.allergiChistory" placeholder="请输入过敏史" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="既往史" field="pastHistory">
              <a-input v-model="formValue.pastHistory" placeholder="请输入既往史" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="传染史" field="contagion">
              <a-input v-model="formValue.contagion" placeholder="请输入传染史" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="身份证号" field="idNo">
              <a-input v-model="formValue.idNo" placeholder="请输入身份证号" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="介绍人" field="introducer">
              <a-input v-model="formValue.introducer" placeholder="请输入介绍人" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="就诊医生" field="seeDoctor">
              <a-select
                v-model="formValue.seeDoctor"
                :options="doctorList"
                placeholder="请选择就诊医生"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="初诊日期" field="firstDatetime">
              <a-date-picker class="w-full" v-model="formValue.firstDatetime" type="datetime" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="近次复诊" field="subsequent">
              <a-date-picker class="w-full" v-model="formValue.subsequent" type="datetime" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card :bordered="false" class="mt-3 proCard" title="就诊信息">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="过敏史" field="allergiChistory">
              <a-input v-model="formValue.allergiChistory" placeholder="请输入过敏史" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="既往史" field="pastHistory">
              <a-input v-model="formValue.pastHistory" placeholder="请输入既往史" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="传染史" field="contagion">
              <a-input v-model="formValue.contagion" placeholder="请输入传染史" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="身份证号" field="idNo">
              <a-input v-model="formValue.idNo" placeholder="请输入身份证号" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="介绍人" field="introducer">
              <a-input v-model="formValue.introducer" placeholder="请输入介绍人" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="就诊医生" field="seeDoctor">
              <a-select
                v-model="formValue.seeDoctor"
                :options="doctorList"
                placeholder="请选择就诊医生"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="初诊日期" field="firstDatetime">
              <a-date-picker class="w-full" v-model="formValue.firstDatetime" type="datetime" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="近次复诊" field="subsequent">
              <a-date-picker class="w-full" v-model="formValue.subsequent" type="datetime" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form>
    <template #rightFooter>
      <a-space>
        <a-button @click="resetForm">重置</a-button>
        <a-button type="primary" @click="handleSubmit">提交</a-button>
      </a-space>
    </template>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import { Message } from '@arco-design/web-vue';

  const matterList = [
    {
      label: '种牙',
      value: 1,
    },
    {
      label: '补牙',
      value: 2,
    },
    {
      label: '根管',
      value: 3,
    },
  ];

  const doctorList = [
    {
      label: '李医生',
      value: 1,
    },
    {
      label: '黄医生',
      value: 2,
    },
    {
      label: '张医生',
      value: 3,
    },
  ];

  const rules = {
    name: [
      {
        required: true,
        message: '请输入预约姓名',
        trigger: 'blur',
      },
    ],
    remark: [
      {
        required: true,
        message: '请输入预约备注',
        trigger: 'blur',
      },
    ],
    mobile: [
      {
        required: true,
        message: '请输入预约电话号码',
        trigger: ['input'],
      },
    ],
    datetime: [
      {
        required: true,
        type: 'number',
        message: '请选择预约时间',
        trigger: ['blur', 'change'],
      },
    ],
    seeDoctor: [
      {
        required: true,
        type: 'number',
        message: '请选择就诊时间',
        trigger: ['blur', 'change'],
      },
    ],
    firstDatetime: [
      {
        required: true,
        type: 'number',
        message: '请选择初诊时间',
        trigger: ['blur', 'change'],
      },
    ],
    doctor: [
      {
        required: true,
        type: 'number',
        message: '请选择预约医生',
        trigger: 'change',
      },
    ],
  };

  const formRef: any = ref(null);

  const formValue = reactive({
    name: '',
    mobile: '',
    remark: '',
    sex: 1,
    matter: null,
    doctor: null,
    datetime: undefined,
    dateBirth: null,
    allergiChistory: '',
    pastHistory: '',
    contagion: '',
    idNo: '',
    introducer: '',
    seeDoctor: null,
    firstDatetime: null,
    subsequent: null,
  });

  function handleSubmit() {
    formRef.value.validate().then((errors) => {
      if (errors) {
        console.log('error', errors);
        return Message.error('验证失败，请填写完整信息');
      }
      console.log('values', formValue);
      Message.success('验证成功');
    });
  }

  function resetForm() {
    formRef.value.resetFields();
  }
</script>
